<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="/bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cowcat.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="/bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <script src="/bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/vue.global.js"></script>

    <style>
        .topView {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .catDiv{
            margin-bottom: 1rem;
        }

        .cowcatImg{
            width: 4rem;
            height: 4rem;
        }
        .cowcatSpan{
            color: white;
            font-size: 1.6rem;
        }

        form {
            background-color: #faf8fb;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 10px;
        }

        .bottomView {
            display: flex;
            justify-content: center;
        }

        .menuView {
            padding: 0 6.0185vw 20px 6.0185vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .middleLine {
            padding-left: 20px;
            padding-right: 20px;
        }

        span,
        label {
            color: #666;
        }
    </style>

</head>

<body>
    <div class="mainView">
        <div class="topView">
            <div class="catDiv"><img src="./images/cowcat.png" class="cowcatImg"/><span class="cowcatSpan">COWCAT</span></div>
            <form v-on:submit.prevent>
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" v-model="userName"
                        v-on:input="checkFinish">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" v-model="password"
                        v-on:input="checkFinish">
                </div>
                <button v-on:click="login" class="btn btn-primary btn-block" v-bind:disabled='flag'>登录</button>
            </form>
        </div>
        <div class="bottomView">
            <div class="menuView">
                <span v-on:click="jumpToRegister">新用户注册</span><span class="middleLine">|</span><span v-on:click="forgetPassword">找回密码</span>
            </div>
        </div>





        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{tipMessage}}
                    </div>
                </div>
            </div>
        </div>





    </div>
</body>
<script>

    const vueApp = {
        data() {
            return {
                flag: true,
                userName: '',
                password: '',
                tipMessage: '',
            }
        },
        methods: {
            login() {
                let uName = this.userName
                let pword = this.password
                let _this = this
                $.post('/login', { 'userName': uName, 'password': pword }, function (res) {
                    console.log(res)
                    if (!res.data.isSuccess) {
                        _this.tipMessage = res.data.errorMsg;
                        $('#exampleModal').modal('show')
                    } else {//登录成功
                        localStorage.setItem('userName', res.data.data.userName)
                        localStorage.setItem('password', res.data.data.password)
                        localStorage.setItem('userId', res.data.data.id)
                        window.location.href = './main.html'
                    }

                })
            },
            jumpToRegister() {
                window.location.href = "./user/register.html"
            },
            checkFinish() {
                if (this.userName && this.password) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            },
            forgetPassword(){
                window.location.href = "./securityCenter/forgetPassword.html"
            }
        }
    }

    const app = Vue.createApp(vueApp)
    app.mount(".mainView")
</script>

</html>